<template>
	<view class="equipment-installation-container">
		<!-- 底图底图区域 -->
		<view class="equipment-installation-map-container">
			<map
				v-if="showmap"
				:id="'map' + random"
				class="equipment-installation-map"
				:show-location="showLocation"
				:latitude="latitude"
				:longitude="longitude"
				:covers="covers"
				:scale="scale"
			>
				<view class="cover-container">
					<view class="menu-wrap">
						<view class="left-btn-wrap">
							<view class="btn-item">
								<image style="width: 48rpx; height: 48rpx" mode="aspectFit" :src="search_well_icon"></image>
								<view @click="handleRouteTo(1)" style="height: 45rpx">搜索井点 </view>
							</view>
							<view class="btn-item">
								<image style="width: 48rpx; height: 48rpx" mode="aspectFit" :src="eqp_list_icon"></image>
								<view @click="handleRouteTo(2)" style="height: 45rpx">设备列表 </view>
							</view>
						</view>
						<image
							style="width: 80rpx; height: 80rpx"
							mode="aspectFit"
							:src="map_poi_icon"
							@click="handleGetLocationPoint()"
						></image>
					</view>
					<!-- 浮窗区域 -->
					<view v-if="!(showWellList || showWellInfo)" style="padding-bottom: 68rpx"></view>
					<wellList v-if="showWellList" :well-list="wellList" @selectWell="handleSelectWell" />
					<wellInfo v-if="showWellInfo" :well-info="selectWell" @showWellList="handleGetLocationPoint" />
				</view>
			</map>
		</view>
	</view>
</template>
<script>
import wellList from '@/pages/equipmentInstallation/wellList.vue';
import wellInfo from '@/pages/equipmentInstallation/wellInfo.vue';
import { getLocationPoint } from '@/api/equipmentInstallation';
import map_poi_icon from '@/static/equipmentinstallation/map_poi.png';
import eqp_list_icon from '@/static/equipmentinstallation/eqp_list_icon.png';
import search_well_icon from '@/static/equipmentinstallation/search_well_icon.png';
import {wgs84togcj02} from '@/utils/coordtransform.js';
export default {
	components: {
		wellList,
		wellInfo,
	},
	data() {
		return {
			map_poi_icon,
			eqp_list_icon,
			search_well_icon,
			showWellList: false,
			wellList: [],
			showWellInfo: false,
			selectWell: null,
			showLocation: true,
			scale: 14,
			showmap: true,
			latitude: '',
			longitude: '',
			mapContext: null,
			covers: [],
			unit: 100 / 1000, // 默认1单位为1000米
			random: 0,
		};
	},
	methods: {
		onReady() {
			const eventChannel = this.getOpenerEventChannel();
			this.eventChannel = eventChannel;
			eventChannel.on('routeShowWellInfo', (data) => {
				this.handleSelectWell(data);
			});
			this.init();
		},
		init() {
			this.random = Math.ceil(Math.random() * 10000);
			this.initMap(true);
		},
		initMap(initflag) {
			// 先获取定位
			uni.getLocation({
				type: 'wgs84',
				altitude: true,
				success: (res) => {
					// 当前经纬坐标
					this.latitude = res.latitude;
					this.longitude = res.longitude;
					// 永康经纬度测试使用
					// this.latitude = 28.911243;
					// this.longitude = 120.015565;
				},
			});
		},
		// 获取周边井点列表
		async handleGetLocationPoint() {
			this.showWellInfo = false;
			if (this.showWellList) {
				this.showWellList = !this.showWellList;
				return;
			}
			try {
				const params = {
					latitude: this.latitude,
					longitude: this.longitude,
					distance: this.unit,
					isFormData: true,
				};
				const { data } = await getLocationPoint(params);
				this.wellList = data?.result?.records || [];
				console.log(params, 'params');
				console.log(this.wellList, 'wellList');
				// 非初始化地图时，获取定位周边井点列表后显示列表信息
				this.showWellList = !this.showWellList;
				// this.selectWell = {};
			} catch (e) {
				//TODO handle the exception
				console.log(e);
			}
		},
		handleSelectWell(wellInfo) {
			this.selectWell = {
				...wellInfo,
			};
			this.showmap = false;
			// 数据库井点经纬度为大地200 需转换为84坐标系 才能正常显示于小程序地图 
			const [longitude,latitude] = wgs84togcj02(wellInfo.longitude,wellInfo.latitude)
			// const latitude = wellInfo.latitude;
			// const longitude = wellInfo.longitude;
			this.covers = [
				{
					id: +wellInfo.id.substr(0, 9),
					latitude,
					longitude,
					iconPath: '/static/equipmentinstallation/Yshebei.png',
				},
			];
			this.latitude = latitude;
			this.longitude = longitude;
			this.scale = 16;
			console.log('covers', this.covers);
			this.$nextTick(() => {
				this.showmap = true;
				this.showWellList = false;
				this.showWellInfo = true;
			});
			// setTimeout(() => {
			// }, 100);
		},
		handleRouteTo(type) {
			if (type === 1) {
				// 跳转到搜索井点页
				uni.navigateTo({
					url: '/subpak_eqp_install/searchWell/searchWell',
					events: {
						viewWellInfo: (data) => {
							this.handleSelectWell(data);
						},
					},
				});
				return;
			}
			if (type === 2) {
				// 跳转到设备列表页
				uni.navigateTo({
					url: '/subpak_eqp_install/equipList/equipList',
				});
				return;
			}
		},
		test() {
			uni.navigateTo({
				url: '/subpak_eqp_install/equipAdd/equipAdd',
			});
		},
	},
};
</script>
<style scoped lang="scss">
.equipment-installation-map-container {
	width: 100%;
	height: 100vh;
}

.equipment-installation-map {
	width: 100%;
	height: 100%;
}

.cover-container {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

.menu-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 24rpx;
}

.left-btn-wrap {
	flex: 1;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.btn-item {
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 235rpx;
	height: 80rpx;
	padding: 0 35rpx 0 16rpx;
	margin-left: 24rpx;
	background: #ffffff;
	box-shadow: 0 0 8px 0 #0000001a;
	border-radius: 40px;
	font-size: 32rpx;
	color: #000000e6;
	letter-spacing: 0;

	&:nth-child(1) {
		margin-left: 0;
	}
}
</style>
